<template>
  <div>
    <!-- 这里是文章的列表组件 -->

    <!-- 注意1：默认情况下，只要 van-list 组件一被渲染出来，就会立即触发一次 load 事件 -->
    <!-- 注意2：只要 van-list 组件的 load 事件被触发了，则会自动把 loading 设置为 true -->
    <!-- 注意3：如果在触发 load 事件的时候，loading 的值为 true，则不会再次触发 load 事件 -->
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
        <!-- 基于 v-for 指令，循环渲染文章的 Item 项组件 -->
        <!-- 在使用大数对象的时候，需要调用大数对象提供的 .toString()，将大数对象转换为字符串 -->
        <art-item v-for="item in artlist" :key="item.art_id.toString()" :article="item" @remove-article="removeArticle"></art-item>
      </van-list>
    </van-pull-refresh>

    <!-- 在实际开发中的，我们用到了 3 个现代化： -->
    <!-- 组件化、模块化、工程化 -->
    <!-- 组件化的好处：实现了 DOM 以及 DOM 配套的样式、业务逻辑的复用 -->
    <!-- 模块化的好处：实现了 JS 代码的复用 -->
  </div>
</template>

<script>
// 1. 按需导入 API 接口
import { getArtListAPI } from '@/api/homeAPI.js'
// 导入文章的 Item 项组件
import ArtItem from '@/components/ArtItem/ArtItem.vue'

export default {
  name: 'ArtList',
  props: {
    // 频道的 Id（小驼峰命名法）
    channelId: {
      type: Number, // 数据类型
      required: true // 必填项
    }
  },
  data() {
    return {
      // 2. 文章列表的数组
      artlist: [],
      // 是否正在进行上拉加载的请求
      loading: false,
      // 所有数据是否加载完毕了
      finished: false,
      // 是否正在进行下拉刷新的数据请求
      isRefresh: false
    }
  },
  // 4. 在 created 调用初始化数据的方法
  created() {
    this.initArtList()
  },
  methods: {
    // 3. 初始化文章列表数据的方法
    // 如果调用 initArtList 期间，state 的值为 true，则是下拉刷新；
    // 否则，如果 state 的值为 false，则是上拉加载；
    async initArtList(state) {
      // 只要方法内部用到了 await，则方法必须被 async 修饰
      const { data: res } = await getArtListAPI(this.channelId)
      console.log(res)
      if (res.message === 'OK') {
        // 把请求到的数据，转存到 data 中的 artlist 上
        if (state) {
          // 下拉刷新，“新数据”在前，“旧数据”在后
          this.artlist = [...res.data.results, ...this.artlist]
          // 重置 isRefresh 为 false，否则无法触发下次的下拉刷新
          this.isRefresh = false
        } else {
          // 上拉加载，“旧数据”在前，“新数据”在后
          this.artlist = [...this.artlist, ...res.data.results]
          // 重置 loading 的值为 false，否则无法触发下次的 load 事件
          this.loading = false
        }
        // 判断所有数据是否加载完毕了
        if (res.data.results.length === 0) {
          this.finished = true
        }
      }
    },
    // 上拉加载更多的事件处理函数
    onLoad() {
      console.log('触发了上拉加载更多')
      this.initArtList()
    },
    // 下拉刷新的事件处理函数
    onRefresh() {
      console.log('触发了下拉刷新')
      this.initArtList(true)
    },
    // 触发了 ArtItem 组件的 @remove-article 事件
    removeArticle(id) {
      console.log(id)
      // 调用数组的 filter 方法进行数据的过滤，
      // 过滤的结果会形成一个新数组，新数组中不包含要删除的那篇文章
      this.artlist = this.artlist.filter(item => item.art_id.toString() !== id)

      // 如果剩余的数据不够 10 条，则主动加载下一页的数据
      if (this.artlist.length < 10) {
        this.initArtList()
      }
    }
  },
  components: {
    // 注册文章的 Item 项组件
    ArtItem
  }
}
</script>

<style lang="less" scoped></style>
